<template>
    <div class="detail_module_panel other_info">
        <h2 style="line-height: 40px"><i class="el-icon-menu"><b> {{ $t('collection.currentOrderDetail') }}</b></i>
        <!--历史贷款信息-->
        <el-button type="primary" style="margin-left: 20px;" @click="getLoanHistory">{{ $t('common.historicalInfo') }}</el-button>
        </h2>
        <div class="panel_info_content">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column :label="$t('system.appName')" prop="appName" min-width="130">
                    <template slot-scope="{ row }">{{ row.appName | switchAppName }}</template>
                </el-table-column><!--APP名称-->
                <el-table-column :label="$t('system.appPackage')"  min-width="130">
                    <template>
                        <div>
                            {{appPackage}}
                        </div>                    
                    </template>
                </el-table-column><!--APP包名-->
                <el-table-column v-if="domain=='Bene'" :label="$t('finance.productName')" prop="whiteProductName" min-width="130"></el-table-column><!--伪名-->

                <el-table-column v-else :label="$t('finance.pseudonym')" prop="kana" min-width="130">
                    <template slot-scope="{ row }">{{ row.kana | switchProductName }}</template>
                </el-table-column><!--伪名-->

                <el-table-column :label="$t('common.contractAmount')" prop="contractAmount" min-width="120">
                    <template slot-scope="{ row }">
                        <el-button v-if="domain=='Bene'" type="text" @click="showSpreadDialog(row)">{{ row.contractAmount | formatCurrency }}</el-button>
                        <div v-else>{{ row.contractAmount | formatCurrency }}</div>
                    </template>
                </el-table-column><!--借款金额-->
                <el-table-column :label="$t('common.getAmount')" prop="loanAmount" min-width="120">
                    <template slot-scope="{ row }">{{ row.loanAmount | formatCurrency }}</template>
                </el-table-column><!--到手金额-->
                <el-table-column align="left" :label="$t('common.loanTime')" prop="startTime" min-width="170">
                    <template slot-scope="{ row }">{{ row.startTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template>
                </el-table-column><!--放款时间-->
                <el-table-column align="left" :label="$t('common.shouldRepayTime')" prop="repayTime" min-width="170">
                    <template slot-scope="{ row }">
                        <el-button v-if="domain=='Bene'" type="text" @click="showSpreadDialog(row)">{{ row.repayTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</el-button>
                        <template v-else>{{ row.repayTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template>
                    </template>
                </el-table-column><!--应还时间-->

                <el-table-column prop="totalPeriods" v-if="showSpread" :label="$t('install.totalBorrowPeriod')" min-width="150"></el-table-column><!--借款总周期-->
                <el-table-column prop="currentPeriod" v-if="showSpread" :label="$t('install.currentBorrowPeriod')" min-width="150"></el-table-column><!--借款当前周期-->


                <el-table-column align="left" :label="$t('common.shouldRepayCapital')" prop="shouldRepay" min-width="90">
                    <template slot-scope="{ row }">{{ row.shouldRepay | formatCurrency }}</template>
                </el-table-column><!--应还本金-->
                <el-table-column align="left" :label="$t('common.shouldRepayPenaltyRate')" prop="lateCharge" min-width="90">
                    <template slot-scope="{ row }">{{ row.lateCharge | formatCurrency }}</template>
                </el-table-column><!--应还罚息-->
                <el-table-column align="left" :label="$t('common.shouldRepayLateFee')" prop="lateFee" min-width="110">
                    <template slot-scope="{ row }">{{ row.lateFee | formatCurrency }}</template>
                </el-table-column><!--应还滞纳金-->
                <el-table-column align="left" :label="$t('common.overdueDays')" prop="lateDays" min-width="80">
                    <template slot-scope="{ row }">
                        <div v-if="domain=='Bene'">
                            <el-button type="text" @click="showSpreadDialog(row)">{{ row.lateDays}}</el-button>
                        </div>
                        <div v-else >{{ row.lateDays }}</div>
                    </template>
                </el-table-column><!--逾期天数-->
                <el-table-column align="left" :label="$t('common.hasRepayAmount')" prop="payedAmount" min-width="90">
                    <template slot-scope="{ row }">{{ row.payedAmount | formatCurrency }}</template>
                </el-table-column><!--已还金额-->
                <el-table-column align="left" :label="$t('common.restRepay')" prop="restRepay" min-width="90">
                    <template slot-scope="{ row }">{{ row.restRepay | formatCurrency }}</template>
                </el-table-column><!--挂账金额-->
                <el-table-column align="left" :label="$t('common.coupons')" prop="restRepay" min-width="90">
                    <template slot-scope="{ row }">
                        <span v-if="row.ticketAmount">{{ row.ticketAmount | formatCurrency }}</span>
                        <span v-else>--</span>
                    </template>
                </el-table-column><!--优惠券-->
                <el-table-column align="left" :label="$t('common.repayStatus')" prop="status" min-width="120"><!--还款状态-->
                    <template slot-scope="scope">{{ scope.row.status | repayStatusSwitch }}</template>
                </el-table-column>
                <el-table-column v-if="!showRepaySerialNumber" align="left" :label="$t('common.repaySerialNumber')" prop="contractNumber" min-width="150">
                </el-table-column><!--还款序列号-->
                <el-table-column v-if="showRepaySerialNumber" align="left" :label="$t('common.repaySerialNumber')" prop="contractNumber" min-width="150">
                    <template slot-scope="{ row }" >
                        <generateRepaymentCode :data='row' :orderid='orderId'></generateRepaymentCode>
                    </template>
                </el-table-column><!--还款序列号-->
            </el-table>
        </div>
        <!-- 生成还款序列号弹窗 -->
        <alert-dialog title="通讯录" width="500px" :visible.sync="contactShow">
            <el-table :data="currentData" style="width: 100%;">
                <el-table-column prop="name" label="联系人" width="150"></el-table-column>
                <el-table-column prop="tel" label="手机号" width="150"></el-table-column>
                <el-table-column label="" min-width="50">
                    <template slot-scope="scope">
                        <el-button  v-if="scope.row.tel"
                                    @click="call(scope.row)"
                                    class="btn_call_center"
                                    size="mini"
                                    type="text"
                                    icon="el-icon-phone">Call</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination @current-change="changePage" :current-page="page.page" :page-size="page.limit" layout="total, prev, pager, next"
                           :total="page.total">
            </el-pagination>
        </alert-dialog>
        <el-dialog :title="$t('common.historicalInfo')" width="80%" :visible.sync="loanHistoryDialog.isVisible" dialog-position="center-center">
            <loan-history
                    :data="loanHistoryDialog.data"
                    @showRecord="showRecord">
            </loan-history>
        </el-dialog>
        <div v-if="isVisibleRecord" class="collection_records">
            <div class="placeholder" v-if="true" :style="{height: '228px'}">
                <div :style="{top: '-200px'}" class="tables">
                    <ul class="tabs">
                        <li>
                            <a @click="tabName = 'urgingRecordsS0'" :class="{'active': tabName === 'urgingRecordsS0'}" href="javascript:void(0);">{{ $t('collection.S0ColRecord') }}<i class="detail_menu_icon el-icon-caret-top"></i></a>
                        </li>
                        <li>
                            <a @click="tabName = 'urgingRecordsS1'" :class="{'active': tabName === 'urgingRecordsS1'}" href="javascript:void(0);">{{ $t('collection.S1ColRecord') }}<i class="detail_menu_icon el-icon-caret-top"></i></a>
                        </li>
                        <li>
                            <a @click="tabName = 'urgingRecordsS2'" :class="{'active': tabName === 'urgingRecordsS2'}" href="javascript:void(0);">{{ $t('collection.S2ColRecord') }}<i class="detail_menu_icon el-icon-caret-top"></i></a>
                        </li>
                        <li>
                            <a @click="tabName = 'urgingRecordsS3'" :class="{'active': tabName === 'urgingRecordsS3'}" href="javascript:void(0);">{{ $t('collection.S3ColRecord') }}<i class="detail_menu_icon el-icon-caret-top"></i></a>
                        </li>
                        <li>
                            <a @click="tabName = 'urgingRecordsM2'" :class="{'active': tabName === 'urgingRecordsM2'}" href="javascript:void(0);">{{ $t('collection.M2ColRecord') }}<i class="detail_menu_icon el-icon-caret-top"></i></a>
                        </li>
                        <li>
                            <a @click="tabName = 'urgingRecordsM3'" :class="{'active': tabName === 'urgingRecordsM3'}" href="javascript:void(0);">{{ $t('collection.M3ColRecord') }}<i class="detail_menu_icon el-icon-caret-top"></i></a>
                        </li>
                        <li>
                            <a @click="tabName = 'urgingRecordsM4'" :class="{'active': tabName === 'urgingRecordsM4'}" href="javascript:void(0);">{{ $t('collection.M3PlusColRecord') }}<i class="detail_menu_icon el-icon-caret-top"></i></a>
                        </li>
                        <li class="btn_close"><el-button @click="closeRecord" type="text">{{ $t('common.close') }}</el-button></li>
                    </ul>
                    <div class="table_panel">
                        <urging-records-s0
                                type='historyOrder'
                                :v-if="teamId.S0"
                                :teamId="teamId.S0"
                                :overdue-info-id="recordOverdueInfoId"
                                :data="dictData"
                                v-show="tabName === 'urgingRecordsS0'">S0催收记录
                        </urging-records-s0>
                        <!-- :v-if="teamId.S1" -->
                        <urging-records-s1
                                type='historyOrder'
                                :teamId="teamId.S1"
                                :overdue-info-id="recordOverdueInfoId"
                                :data="dictData"
                                v-show="tabName !== 'urgingRecordsS0'">S1催收记录
                        </urging-records-s1>
                        <!-- <urging-records-s2 -->
                                <!-- :v-if="teamId.S2" -->
                                <!-- :teamId="teamId.S2" -->
                                <!-- :overdue-info-id="recordOverdueInfoId" -->
                                <!-- :data="dictData" -->
                                <!-- v-show="tabName === 'urgingRecordsS2'">S2催收记录 -->
                        <!-- </urging-records-s2> -->
                        <!-- <urging-records-s3 -->
                                <!-- :v-if="teamId.S3" -->
                                <!-- :teamId="teamId.S3" -->
                                <!-- :overdue-info-id="recordOverdueInfoId" -->
                                <!-- :data="dictData" -->
                                <!-- v-show="tabName === 'urgingRecordsS3'">S3催收记录 -->
                        <!-- </urging-records-s3> -->
                        <!-- <urging-records-m2 -->
                                <!-- :v-if="teamId.M2" -->
                                <!-- :teamId="teamId.M2" -->
                                <!-- :overdue-info-id="recordOverdueInfoId" -->
                                <!-- :data="dictData" -->
                                <!-- v-show="tabName === 'urgingRecordsM2'">M2催收记录 -->
                        <!-- </urging-records-m2> -->
                        <!-- <urging-records-m3 -->
                                <!-- :v-if="teamId.M3" -->
                                <!-- :teamId="teamId.M3" -->
                                <!-- :overdue-info-id="recordOverdueInfoId" -->
                                <!-- :data="dictData" -->
                                <!-- v-show="tabName === 'urgingRecordsM3'">M3催收记录 -->
                        <!-- </urging-records-m3> -->
                        <!-- <urging-records-m4 -->
                                <!-- :v-if="teamId.M3P" -->
                                <!-- :teamId="teamId.M3P" -->
                                <!-- :overdue-info-id="recordOverdueInfoId" -->
                                <!-- :data="dictData" -->
                                <!-- v-show="tabName === 'urgingRecordsM4'">M3+催收记录 -->
                        <!-- </urging-records-m4> -->
                    </div>
                </div>
            </div>
        </div>
        <el-dialog :visible.sync = 'SpreadListObj.isVisible' width="70%">
            <spreadListDialog :type="type=='yc'?'pre':''" v-if="SpreadListObj.isVisible" :rowData="SpreadListObj.data"/>
            <div slot="footer" class="dialog-footer">
                <generateRepaymentCode style="display: inline-block;padding-right: 20px;" :btntext="btntext" :data='SpreadListObj.data' :orderid='orderId'></generateRepaymentCode>
                <el-button type="default" @click="()=>SpreadListObj.isVisible=false">{{$t('common.cancel')}}</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import spreadListDialog from '../../components/spread-list-Dialog'
    import alertDialog from '@/components/alert-dialog';
    import mixin from '@/service/mixin';
    import Pagination from '@/components/pagination';
    import EventBus from '@/libs/event-bus';
    import { eventConf , domain} from '@/config/';
    import LoanHistory from './loan-history';
    import urgingRecordsS0 from './urging-records-s0';
    import urgingRecordsS1 from './urging-records-s1';
    import urgingRecordsS2 from './urging-records-s2';
    import urgingRecordsS3 from './urging-records-s3';
    import urgingRecordsM2 from './urging-records-m2';
    import urgingRecordsM3 from './urging-records-m3';
    import urgingRecordsM4 from './urging-records-m4';
    import generateRepaymentCode from './generate-repayment-code'
    let that = null;
    export default {
        name: 'current-order-detail',
        components: {
            alertDialog,
            Pagination,
            LoanHistory,
            urgingRecordsS0,
            urgingRecordsS1,
            urgingRecordsS2,
            urgingRecordsS3,
            urgingRecordsM2,
            urgingRecordsM3,
            urgingRecordsM4,
            generateRepaymentCode,
            spreadListDialog
        },
        mixins: [mixin],
        props: {
            dictData:{
                default:null
            },
            appPackage:''
        },
        data() {
            return {
                btntext:`${this.$t('common.generate')}${this.$t('common.repaySerialNumber')}`,
                SpreadListObj:{
                    isVisible:false,
                    data:{},
                },
                domain:'',
                showSpread:false,
                showRepaymentCodeDialog:false,
                showRepaySerialNumber:false,//展示商城还款序列号按钮
                type: '',
                overdueInfoId: '',
                orderId: '',
                tableData: [],
                loanHistory: [],
                contactShow: false,
                userId: '',
                contactData: [],
                currentData: [],
                page: {
                    limit: 10, // 每页20条数据
                    // total: '',
                    page: 1,
                },
                loanHistoryDialog: {
                    data: [],
                    isVisible: false,
                },
                tabName: 'urgingRecordsS0',
                // dictData: [],
                isVisibleRecord: false,
                recordOrderId: '',
                recordOverdueInfoId: '',
                teamId: {
                    S0: '',
                    S1: '',
                    S2: '',
                    S3: '',
                    M2: '',
                    M3: '',
                    M3P: '',
                }
            };
        },
        watch: {
            'loanHistoryDialog.isVisible': function(n) {
                if(!n){
                    this.isVisibleRecord = false;
                }
            }
        },
        methods: {
            showSpreadDialog(row){
                console.warn(row)
                row.id = this.overdueInfoId
                this.SpreadListObj = {
                    isVisible:true,
                    data:row
                }
            },
            // 订单具体信息
            getLastRepayScheduleDtoByOrderId() {
                if(this.type === 'cs') {
                    const params = {
                        overdueInfoId: this.overdueInfoId,
                    };
                    this.$api.collection.getRepayScheduleInfo(params).then((res) => {
                        const { status, error, data } = res;
                        if (status === '1' && error === '00000000') {
                            this.tableData = data;
                        }
                    });
                }
                if(this.type === 'yc') {
                    const params = {
                        ycsOverdueInfoId: this.overdueInfoId,
                    };
                    this.$api.collection.getRepayScheduleInfoPre(params).then((res) => {
                        const { status, error, data } = res;
                        if (status === '1' && error === '00000000') {
                            this.tableData = data;
                        }
                    });
                }
            },
            // 获取通讯录列表
            getAddressBook() {
                this.contactShow = true;
                this.page.page = 1;
                const params = {
                    userId: this.userId,
                };
                this.$api.customer.getAddressBook(params).then((res) => {
                    const { status, error, data } = res;
                    if (status === '1' && error === '00000000') {
                        this.contactData = data;
                        this.dataSlice();
                        this.page.total = data.length;
                    }
                });
            },
            // 分页
            dataSlice() {
                let range = (this.page.page - 1) * this.page.limit;
                this.currentData = this.contactData.slice(range, range + this.page.limit);
            },
            changePage(val) {
                this.page.page = val;
                let range = (this.page.page - 1) * this.page.limit;
                this.currentData = this.contactData.slice(range, range + 10);
            },
            // 呼叫按钮
            call(row) {
                if (row.tel) {
                    const params = {
                        phone: row.tel.replace(/-/g, ""),
                        overdueInfoId: this.overdueInfoId,
                    };
                    const tel = row.tel;
                    const name = row.name;
                    this.$api.callCenter.callOut(params).then(res => {
                        const { status, data, error } = res;
                        if ('1' === status && '00000000' === error) {
                            const relationship = '其他';
                            EventBus.$emit(eventConf.CALL_EVENT, {
                                tel,
                                name,
                                relationship,
                                callRecordId: data
                            });
                        }
                    });
                }
            },
            // 获取历史贷款信息
            getLoanHistory() {
                const params = {
                    userId: this.userId,
                    orderId:this.orderId
                };
                if(this.type === 'cs') {
                    this.$api.collection.getOrders(params).then(res => {
                        const { status, data, error } = res;
                        if ('1' === status && '00000000' === error) {
                            this.loanHistoryDialog.data = data;
                            this.loanHistoryDialog.isVisible = true;
                        }
                    });
                }
                if(this.type === 'yc') {
                    this.$api.collection.getYcOrders(params).then(res => {
                        const { status, data, error } = res;
                        if ('1' === status && '00000000' === error) {
                            this.loanHistoryDialog.data = data;
                            this.loanHistoryDialog.isVisible = true;
                        }
                    });
                }
            },
            getDictData() {
                this.$api.collection.queryDictForNotes().then((res) => {
                    const { status, data, error } = res;
                    if (status === '1' && error === '00000000') {
                        this.dictData = data;
                    }
                });
            },
            showRecord(val) {
                this.recordOverdueInfoId = val;
                this.isVisibleRecord = true;
            },
            closeRecord() {
                this.recordOverdueInfoId = '';
                this.tabName = 'urgingRecordsS0';
                this.isVisibleRecord = false;
            },
            getCollectStages() {
                const params = {
                    name: '',
                    active: 0
                };
                this.$api.collection.getCollectStages(params).then(res => {
                    const {status, data, error} = res;
                    if ('1' === status && '00000000' === error && data) {
                        let S0Arr = data.filter(item => {
                            return item.name === 'S0'
                        });
                        let S1Arr = data.filter(item => {
                            return item.name === 'S1'
                        });
                        let S2Arr = data.filter(item => {
                            return item.name === 'S2'
                        });
                        let S3Arr = data.filter(item => {
                            return item.name === 'S3'
                        });
                        let M2Arr = data.filter(item => {
                            return item.name === 'M2'
                        });
                        let M3Arr = data.filter(item => {
                            return item.name === 'M3'
                        });
                        let M3PArr = data.filter(item => {
                            return item.name === 'M3+'
                        });
                        this.teamId.S0 = (S0Arr && S0Arr.length >= 1) ? S0Arr[0].id : '';
                        this.teamId.S1 = (S1Arr && S1Arr.length >= 1) ? S1Arr[0].id : '';
                        this.teamId.S2 = (S2Arr && S2Arr.length >= 1) ? S2Arr[0].id : '';
                        this.teamId.S3 = (S3Arr && S3Arr.length >= 1) ? S3Arr[0].id : '';
                        this.teamId.M2 = (M2Arr && M2Arr.length >= 1) ? M2Arr[0].id : '';
                        this.teamId.M3 = (M3Arr && M3Arr.length >= 1) ? M3Arr[0].id : '';
                        this.teamId.M3P = (M3PArr && M3PArr.length >= 1) ? M3PArr[0].id : '';
                    }
                });
            }
        },
        created() {
            this.domain = this.$storage.get('user').domain
            this.showSpread = domain.showSpread();
            that = this;
            this.showRepaySerialNumber = domain.showRepaySerialNumber();
            const params = this.$route.params;
            this.overdueInfoId = params.id;
            this.orderId = params.orderId;
            this.userId = params.userId;
            this.type = params.type;
            // this.getCollectStages();
            this.getLastRepayScheduleDtoByOrderId();
            // this.getDictData();
        },
        filters: {
            // 还款状态
            repayStatusSwitch(repayStatus) {
                switch (repayStatus + '') {
                    case '1':
                        return that.$t('common.overdueNotRepay');// 逾期未还款
                    case '2':
                        return that.$t('common.overdueHasRepay');// 逾期已还款
                    case '3':
                        return that.$t('common.notOverdueHasRepay');// 未逾期已还款
                    case '0':
                        return that.$t('common.notOverdueNotRepay');// 未逾期未还款
                    default:
                        return '';
                }
            },
        },
    };
</script>

<style lang="scss" scoped>
    @import "~@/assets/scss/function";

    .video{
        background-color: rgba(0, 0, 0, 0.4)!important;
    }
    .video_icon{
        display: block;
        height: 100%;
        width: 100%;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 32px 32px;
        background-image: url("~@/assets/img/icon_video.png");
    }
    .check_loan_history{
        margin-left: 15px;
    }
    .collection_records {
        position: fixed;
        left:0px;
        bottom:0px;
        width:100%;
        height:212px;
        z-index: 3001;
        .placeholder {
            height: 212px;
            position: relative;
            overflow: visible;
        }

        .tables {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            background-color: $colorBg;
            height: 500px;
        }

        .tabs {
            background-color: $primary;
            position: relative;
            li {
                display: inline-block;
                a {
                    color: rgba(255, 255, 255, 0.6);
                    display: block;
                    padding: 0 24px;
                    height: 44px;
                    line-height: 44px;
                    position: relative;
                    &.active {
                        color: #fff;
                        .detail_menu_icon {
                            display: block;
                        }
                    }
                    .detail_menu_icon {
                        display: none;
                        position: absolute;
                        bottom: -7px;
                        left: 50%;
                        transform: translateX(-50%);
                        font-size: 20px;
                        color: #f4f5f6;
                    }
                }
            }
            .detail_tables_icon, .hide_tables_icon {
                position: absolute;
                top: 0;
                right: 0;
                height: 44px;
                line-height: 44px;
                width: 56px;
                color: #fff;
                font-size: 25px;
                cursor: pointer;
                text-align: center;
                &.rotate {
                    transform: rotate(180deg);
                }
            }
            .hide_tables_icon {
                right: 70px;
            }
            .btn_close {
                float:right;
            }
            .el-button--text {
                color:#fff;
                margin-right:20px;
            }
        }
    }
</style>
